<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>danrudanchu</title>
	<style>
		*{
			margin: 0;
			padding: 0;
			list-style: none;
		}
		#view{
			margin: 100px auto;
			width: 800px;
			height: 300px;
			position:relative;
			overflow: hidden;
		}
		img{
			width: 100%;
		}
		li{
			float: left;
		}
		ul{
			width: 6400px;
			overflow: hidden; /*清除浮动*/
			position: absolute;
		}
		button{
			width: 30px;
			height: 150px;
			position: absolute;
			background: rgba(0,0,0,0.1);
			top: 100px;
			border:none;
			font-size: 30px;
			color: darkgray;
			display: none;
		}
		#right{
			right: 0;
		}
		ol{
			position: absolute;
			left: 350px;
			bottom: 0;
		}
		ol>li{
			width: 10px;
			height: 10px;
			border-radius: 50%;
			margin-left: 10px;
			border: 1px solid
		}
	</style>
	<script src = 'jquery-3.1.1.min.js'></script>
</head>
<body>
	<div id="view">
		<ul>
			<li><img src="img/01.jpg" alt=""></li>
			<li><img src="img/01.jpg" alt=""></li>
			<li><img src="img/01.jpg" alt=""></li>
			<li><img src="img/01.jpg" alt=""></li>
			<li><img src="img/01.jpg" alt=""></li>
		</ul>
		<button id="left"><</button>
		<button id="right">></button>
		<ol>
			<li style="background: lightblue"></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ol>
	</div>
	<script>
		$(function(){
			var item = 0
			
			var timer = setInterval(change,2000)
			
			function change(){
				item++
				
				if(item>4){
					item = 0
				}
				
				bianhua()
				
				$('ul>li').eq(item).fadeIn(800).siblings().fadeOut(400)
			}
			
			$('#view').hover(function(){
				clearInterval(timer)
				$('#left').fadeIn(500)
				$('#right').fadeIn(500)
			},function(){
				timer = setInterval(change,2000)
				$('#left').fadeOut(500)
				$('#right').fadeOut(500)
			})
			
			$('#right').on('click',function(){
				$('ul>li').stop(true,true)
				change()
			})
			
			$('#left').on('click',function(){
				item--
				if(item>0){
					item = 4
				}
				bianhua()
				$('ul>li').eq(item).fadeIn(800).siblings().fadeOut(400)
			})
			
			function bianhua(){
				$('ol>li').eq(item).css('background','lightblue').siblings().css('background','none')
			}
		})
	</script>
</body>
</html>
